<template>
    <div class="camera">
        <div id="ezuikit-player"></div>
        <div class="tools">
            <div class="top">
                <img src="../assets/向上.svg" alt=""  />
            </div>
            <div class="left">
                <img src="../assets/向上.svg" alt=""  />
            </div>
            <div class="right">
                <img src="../assets/向上.svg" alt=""  />
            </div>
            <div class="bottom">
                <img src="../assets/向上.svg" alt=""  />
            </div>
        </div>

    </div>


</template>

<script>

import EZUIKit from 'ezuikit-js';

export default {
    data() {
        return {
            id: "",
            player: null,
            control: true,
        }
    },
    methods: {
        loadCamera() {
            if (this.id != "") {
                this.$axios.get(`/Camera/${this.id}`).then(result => {


                    var option = {
                        id: `ezuikit-player`,
                        url: result.data,
                        accessToken: result.sign,
                        audio: 0,
                    };

                    if (this.control) {
                        option.template = "standard";
                    }

                    this.player = new EZUIKit.EZUIKitPlayer(option);

                }).catch(error => {

                    console.log(error);
                });
            }
        }
    },
    mounted: function () {

        this.id = this.$route.params.id;

        if (this.$route.query.control != null) {
            this.control = this.$route.query.control == "false" ? false : true;
        }

        this.loadCamera();
    },
    components: {

    },
    filters:
    {

    }

}

</script>
<style scoped>
.camera {
    width: 100%;
    height: 100%;
    position: relative;

}

#ezuikit-player {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.tools {
    background-color: rgba(0, 0, 0, 0.65);
    width: 150px;
    height: 150px;
    position: absolute;
    right: 400px;
    bottom: 400px;
    border-radius: 50%;
    overflow: hidden;
}

.top {
    width: 150px;
    height: 150px;
    position: inherit;
    transform: rotate(45deg);
    transform-origin: center center;
    top: -70%;
    cursor: pointer;

}

.top img {
    position: relative;
    top: 100px;
    left: 100px;
    width: 30px;
    height: 30px;
    transform: rotate(-45deg);
}

.left {
    width: 150px;
    height: 150px;
    position: inherit;
    transform: rotate(-45deg);
    transform-origin: center center;
    position: relative;
    left: -70%;
    cursor: pointer;
}
.left img {
    position: relative;
    top: 100px;
    left: 100px;
    width: 30px;
    height: 30px;
    transform: rotate(-45deg);
}

.right {
    width: 150px;
    height: 150px;
    position: inherit;
    top: 0px;
    transform: rotate(-45deg);
    transform-origin: center center;
    left: 70%;
    cursor: pointer;
}
.right img {
    position: relative;
    top: 20px;
    left: 20px;
    width: 30px;
    height: 30px;
    transform: rotate(135deg);
}

.bottom {
    width: 150px;
    height: 150px;
    position: inherit;
    top: 0px;
    transform: rotate(-45deg);
    transform-origin: center center;
    top: 70%;
    cursor: pointer;
}
.bottom img {
    position: relative;
    top: 20px;
    left: 100px;
    width: 30px;
    height: 30px;
    transform: rotate(225deg);
}
.top:hover,
.left:hover,
.right:hover,
.bottom:hover {
    background-color: rgba(0, 0, 0, 0.8);
}
</style>